<template>
  <view class="mess-wrap">
    <back :back-title="backTitle" class="back"></back>
    <image class="detail" src="/static/images/mess/detail.png"></image>
    <tab @calcHeight="handleCalcHeight" :current-index.sync="currentIndex"></tab>
    <swiper-list :height="height" :current-index.sync="currentIndex"></swiper-list>
  </view>
</template>

<script>
import tab from './components/tab'
import swiperList from './components/swiper'
export default {
  name: 'mess',
  components: {
    tab,
    swiperList
  },
  data() {
    return {
      backTitle: '我的食堂',
      height: 1,
			currentIndex: 0
    }
  },
  methods: {
    handleCalcHeight(height) {
      const _this = this
      uni.getSystemInfo({
        success(res){
          _this.height = res.windowHeight - height
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.mess-wrap{
  width: 100%;
  min-height:100%;
  position: relative;
  .detail{
    position: absolute;
    right: 20upx;
    top: 56upx;
    width: 136upx;
    height: 60upx;
  }
}
</style>